import 'package:flutter/material.dart';
import 'package:flutter_demo/generated/assets.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class ScrollViewPage extends PageWithTitle {
  const ScrollViewPage({super.key}) : super("滚动视图(SingleChildScrollView)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("在内容超出容器显示范围时，我们通常的处理方式是让它可以滚动浏览，像Column组件"
          "本身不支持滚动，但它内容过多时可以考虑使用ListView来构建组件，Row也是同理，但有些"
          "情况下ListView会不适用，比如在一个竖向列表嵌套一个横向列表，若横向列表不能提供确定"
          "的高度会导致布局异常"),
      LabelText("因为在ListView中item动态加载会无法确定高度,尽管你可能是个静态列表并且只有"
          "一个item"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("SingleChildScrollView"),
      BodyText("类似Android的ScrollView，允许子组件大小超出容器，并可以指定它的滚动轴"),
      LabelText("- scrollDirection 滚动方向"),
      LabelText("- reverse 反转，默认是从开始位置显示，反转则从结束位置显示"),
      LabelText("- padding 边距"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const LabelText("内容过长可以拖动显示界外部分"),
        Container(
          width: 200,
          decoration: BoxDecoration(border: Border.all(color: Theme.of(context).colorScheme.outline,)),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Text(String.fromCharCodes(List.generate(79, (index) {
              return index+48;
            }))),
          ),
        ),
        AppSpacer.mini,
        const LabelText("嵌套使用可以实现横向纵向的滚动浏览，单Flutter设计上不支持嵌套分发"
            "，必须由单一组件处理完整手势，所以这里不能做到斜着滑动，若有斜着滑动的需求可以自己"
            "动过手势解析自定布局，也可以直接找网上成熟的图片浏览库之类的"),
        SizedBox(
          width: 200,
          height: 200,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: SingleChildScrollView(
              reverse: true,
              scrollDirection: Axis.vertical,
              child: UnconstrainedBox(
                child: Image.asset(
                  Assets.imagesBenxi,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
